<template>
	<view class="out">
		<checkbox-group @change="itemChange">
			<view class="item" v-for="(item,index) in goods" :key="item.id">
				<checkbox :value="item.id" :checked="item.checked"></checkbox>
				<text class="title">{{item.name}}</text>
				<text class="price">{{item.price}}元</text>
				<text class="del" @click="remove(index)">删除</text>
			</view>
		</checkbox-group>
		
		
		<view class="card">
			<view class="text">选中{{totalNumbar}}个，总价：{{totalPrice}}元</view>
		</view>
		{{selectGroup}}
	</view>
</template>


<script setup>
import { computed, ref } from 'vue';

const goods = ref([
	{id:"11",name:"小米",price:4999,checked:false},
	{id:"22",name:"华为",price:6899,checked:false},
	{id:"33",name:"oppo",price:2988,checked:false},
	{id:"44",name:"苹果",price:9888,checked:false}
])

const selectGroup = ref([])
const totalNumbar = computed(()=>selectGroup.value.length)
const totalPrice = computed(()=>{
	// filter：用于过滤
	// reduce：用于求和
	// 下面这行是从零开始的
	return goods.value.filter(item=>item.checked).reduce((prev,curr)=>prev+curr.price,0)
})


function remove(index){
	// 用splice删除index传过来的数据
	goods.value.splice(index,1)
}

function itemChange(e){
	console.log(e);
	selectGroup.value = e.detail.value
	goods.value.forEach(item=>{
		// 设置选中的selectGroup.value和数据源中item.id来进行对比
		item.checked = selectGroup.value.includes(item.id)
	})
}

</script>

<style lang="scss" scoped>
.out{
	padding: 10px;
	.item{
		padding: 10px 0;
		.price{
			margin-left: 30px;
		}
		.del{
			color: #c00;
			margin-left: 30px;
		}
	}
	.card{
		margin-top: 30px;
		border-top: 1px solid #eee;
		padding: 10px;
	}
}
</style>
